import React, { useContext, useEffect, useState } from "react"
import styles from "./App.module.css"
import { appContext } from "./AppState"
import { ShoppingCart, TestContext } from "./component/index"

const App = () => {
	const [count, setCount] = useState(0)

	const ctx = useContext(appContext)

	const handleIncreaseClick = () => {
		setCount(count + 1)
		ctx.setState &&
			ctx.setState(preProps => ({
				name: "Chan",
				age: preProps.age,
			}))
	}

	useEffect(() => {
		console.log("useEffect 会调用一次")
	}, [])

	return (
		<>
			<div className={styles.app + " p-2 text-center"}>这是一个标题</div>
			<div className="text-center p-4">
				<ShoppingCart></ShoppingCart>
				<TestContext></TestContext>
			</div>
			<div className="p-2 text-center">
				<div className="mb-2">{count}</div>
				<button type="button" className="btn btn-info" onClick={handleIncreaseClick}>
					increase
				</button>
			</div>
		</>
	)
}

export default App
